<!DOCTYPE html>
<html>
<head>
    <style>
        .row{
            margin: 10px auto;
        }
        .bottom{
            vertical-align: bottom;
        }
        .middle{
            vertical-align: middle;
        }
        .top{
            vertical-align: top;
        }
        .baseline{
            vertical-align: baseline;
        }
    </style>
</head>
<body>
    <div class="row"><img class="bottom" src="./imgs/JAVA.jpg"/>vertical-align: bottom</div>
    <div class="row"><img class="middle" src="./imgs/JAVA.jpg"/>vertical-align: middle;</div>
    <div class="row"><img class="baseline" src="./imgs/JAVA.jpg"/>vertical-align: top;</div>
    <div class="row"><img class="top" src="./imgs/JAVA.jpg"/>vertical-align: baseline;</div>

    <div style="border: 2px solid orange; margin: 10px 0;"><img src="./imgs/JAVA.jpg" alt="">ppppp</div>
    <div style="border: 2px solid orange; margin: 10px 0;"><img style="vertical-align: bottom;" src="./imgs/JAVA.jpg" alt="">ppppp</div>
</body>
</html>